<template>
	<view class="">
		<view class="mt-24 px-24 bgc-white">
			<view class="fd-r h-100">
				<text class="flex1 fs-28">头像</text>
				<button
					v-if="user.icon"
					class="p-0 w-80 h-80"
					open-type="chooseAvatar"
					@chooseavatar="HGetAvatar"
				>
					<image class="w-80 h-80" :src="user.icon" mode=""></image>
				</button>
				<button
					v-else
					class="btn-red h-52 lh-52 mx-12 fs-24"
					open-type="chooseAvatar"
					@chooseavatar="HGetAvatar"
				>
					选择头像
				</button>
				<tm-icon name="tmicon-angle-right"></tm-icon>
			</view>
			<view class="divider"></view>

			<view class="fd-r h-100">
				<text class="fs-28">昵称</text>
				<input
					class="flex1 text-align-right fs-28"
					type="text"
					v-model="user.name"
				/>
			</view>
			<view class="divider"></view>

			<view class="fd-r h-100">
				<text class="fs-28">性别</text>
				<input
					class="flex1 text-align-right fs-28"
					type="text"
					v-model="user.sex"
				/>
			</view>
			<view class="divider"></view>

			<view class="fd-r h-100">
				<text class="fs-28">生日</text>
				<picker
					class="flex1"
					mode="date"
					:value="user.birthday"
					@change="bindDateChange"
				>
					<view v-if="user.birthday" class="fs-28 text-align-right">
						{{ user.birthday }}
					</view>
					<view v-else class="fs-28 text-align-right c-grey">
						填写后生日当天会有福利哦
					</view>
				</picker>
			</view>
		</view>

		<button class="btn-red mt-24 mx-24" @click="HSubmit">保存</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
// import { getMemberByPhone, userUpdate } from '@/api/login';
// import fileApi from '@/api/file.js';

const obj = JSON.parse(uni.getStorageSync('userInfo2'))
const user = ref({});
const HGetUser = async () => {
	const res = await getMemberByPhone({
		phone: obj.phone
	});
	user.value = res.data;
	
	uni.setStorageSync(
		'userInfo2',
		JSON.stringify(res.data)
	);
};

HGetUser()
const bindDateChange = (e) => {
	user.value.birthday = e.detail.value;
};

const HGetAvatar = (e) => {
	console.log('HGetAvatar', e);
	const path = e.detail.avatarUrl;
	fileApi.uploadImg(path, {}, (res) => {
		user.value.icon = res.data[0].url;
	});
};

const HSubmit = () => {
	userUpdate(user.value)
		.then((res) => {
			HGetUser()
			uni.showToast({ title: '保存成功', icon: 'none' });
		})
		.catch((err) => {
			uni.showToast({ title: '保存失败', icon: 'none' });
		});
};
</script>

<style></style>
